<template>
	<view class="strategyDetails">
		<!-- 我的攻略页面详情 -->
		<u-navbar title="详情" :autoBack="true"></u-navbar>
		<view class="strategyDetailsI">
			<img :src="DetailsData.photo[0]" alt="" />
			<view class="title">
				{{DetailsData.title}}
				<view class="strategyDetailsIP">
					<img :src="DetailsData.profilePhoto" alt="" />
					<span>{{DetailsData.nickName}}</span>
				</view>
			</view>

		</view>
		<view class="strategyDetailsDiv">
			{{DetailsData.content}}
		</view>
		<view class="strategyDetailsIcon">
			<view class="">
				<img src="/static/my/zuji.png" alt="" />
				<span>{{quantity.browsingHistoryNum}}</span>
			</view>
			<view class="" @click="clickCollectAdd">
				<img v-if="!isUserInfoIsNotCollect" src="/static/my/shoucang1.png" alt="" />
				<img v-else src="/static/my/shoucang.png" alt="" />
				<span>{{quantity.collectNum}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		strategyById,
		collectAdd,
		browsingHistoryAdd,
		userInfoCount,
		userInfoIsNotCollect
	} from '@/api/userCenter.js'
	export default {
		data() {
			return {
				DetailsData: {},
				id: '',
				quantity: {},
				isUserInfoIsNotCollect: false
			};
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			this.getDetails()
			let unsrInfo = uni.getStorageSync('userInfo')
			if (unsrInfo.token) {
				this.clickBrowsingHistoryAdd()
				this.getUserInfoIsNotCollect()
			}
			this.getUserInfoCount()
		},
		methods: {
			// 是否收藏
			async getUserInfoIsNotCollect() {
				let par = {
					detailsId: this.id
				}
				let res = await userInfoIsNotCollect(par)
				if (res.code == 200) {
					this.isUserInfoIsNotCollect = res.data
				}
			},
			// 足迹收藏数量
			async getUserInfoCount() {
				let par = {
					type: '攻略',
					detailsId: this.id
				}
				let res = await userInfoCount(par)
				if (res.code == 200) {
					this.quantity = res.data
				}
			},
			// 添加足迹
			async clickBrowsingHistoryAdd() {
				let par = {
					type: '攻略',
					detailsId: this.id
				}
				let res = await browsingHistoryAdd(par)
				if (res.code == 200) {
					console.log('足迹添加成功');
				}
			},
			// 点击攻略添加收藏
			async clickCollectAdd() {
				let par = {
					type: '攻略',
					detailsId: this.id
				}
				let res = await collectAdd(par)
				if (res.code == 200) {
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					this.getUserInfoIsNotCollect()
					this.getUserInfoCount()
				}
			},
			// 获取攻略详情
			async getDetails() {
				let par = {
					id: this.id,
					type: '4',
					lon: null,
					lat: null
				}
				let res = await strategyById(par)
				if (res.code == 200) {
					this.DetailsData = res.data
					console.log(res);
				}
			}
		}
	}
</script>

<style lang="scss">
	.strategyDetails {
		width: 100%;
		min-height: 100vh;
		overflow-y: auto;
		position: relative;

		.strategyDetailsIcon {
			position: fixed;
			padding: 10rpx 20rpx;
			/* 毛玻璃模糊效果 */
			backdrop-filter: blur(10rpx);
			-webkit-backdrop-filter: blur(10rpx);
			/* 细微边框增强玻璃质感 */
			border: 1rpx solid rgba(255, 255, 255, 0.18);
			/* 可选：添加阴影增强层次感 */
			box-shadow: 0 8rpx 32rpx 0 rgba(31, 38, 135, 0.15);
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 30rpx;
			border-radius: 40rpx;
			left: 50%;
			bottom: 100rpx;
			z-index: 999;
			transform: translate(-50%, 0);

			view {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 10rpx;

				span {
					font-size: 26rpx;
				}

				img {
					width: 50rpx;
					height: 50rpx;
				}
			}


		}

		.strategyDetailsDiv {
			margin-top: -30rpx;
			padding: 30rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			font-size: 26rpx;
		}

		.strategyDetailsI {
			width: 100%;
			height: 500rpx;
			position: relative;
			z-index: -1;



			.title {
				position: absolute;
				bottom: 50rpx;
				left: 30rpx;
				color: #ffffff;
				font-size: 40rpx;

				.strategyDetailsIP {
					display: flex;
					align-items: center;
					gap: 10rpx;
					margin-top: 20rpx;

					span {
						font-size: 24rpx;
					}

					img {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}
				}
			}

			img {
				width: 100%;
				height: 100%;
			}
		}

		::v-deep .u-status-bar,
		::v-deep .u-navbar__content {
			background: none !important;
		}
	}
</style>